<template>
<div id="hello">

<!--  <img src="https://gitee.com/xin-yue-qin/knn/raw/master/img/%E8%88%92%E6%9C%8D%E6%98%AF%E7%95%99%E7%BB%99%E6%9C%89%E9%92%B1%E4%BA%BA%E7%9A%84.jpg" alt="舒服是留给有钱人的" style="zoom:50%;" />-->
  <div>
    跨域后返回的数据：
    {{responseData}}
  </div>

</div>


</template>

<script>
import $ from 'jquery'

export default {
  name: 'TestJsonp',
  data() {
    return{
      responseData:'hhh'
    }

  },

  mounted:function(){

    this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
        {
          //请求参数
          params: {
            wd:'张杰'
          },
          jsonp:'cb', //回调参数
          //jsonpCallback:"test"
        }).then(function(res){
          console.log("直接跨域")
          console.log("this.$http.jsonp-res:",res)
          this.responseData=res.data
        },
        function(){
          console.log("抱歉无法调取")
        }
    )


    // 虽然本身返回的不是jsonp格式数据，但是这个接口也是个比较让人舒服的接口，他会接收你的callback名称，然后用这个拼接
    // this.$http.jsonp('https://view.inews.qq.com/g2/getOnsInfo',
    //     {
    //       params:{
    //         name:'disease_h5'
    //       },
    //       // jsonp:'cb'  //这个网站jsonp认callback
    //     }).then(res => {
    //       console.log("111111rres:",res)
    //
    // }).catch(err => {
    //   console.log(err)
    // })



    // 返回的不是jsonp格式跨域失败
    // this.$jsonp('https://c.m.163.com/ug/api/wuhan/app/data/list-total',
    //     {
    //       // name:'disease_h5'
    //     }).then(res => {
    //   console.log("res:",res.data)
    //
    // }).catch(err => {
    //   console.log(err)
    // })



    $.ajax({
      url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
      type: 'post',
      dataType: "jsonp",
      jsonp: 'cb',
      jsonpCallback: 'gg',
      data: {'wd': '林俊杰'},
      success:(res=>{
        console.log("搭配ajax使用jsonp跨域case1")
        console.log(res)
        this.responseData=res.q
        console.log("this.responseData:",this.responseData)
      })
    });



    $.ajax({
      url:"http://suggestion.baidu.com/su?",
      type:"get",
      dataType:"Jsonp",
      data:{
        wd:"王菲",
      },
      jsonp:'cb', //回调函数参数
      jsonpCallback:"test" //回调函数值
    }).then(res=>{
      console.log("搭配ajax使用jsonp跨域case2")
      console.log("ajax-res:",res);
    })

  }

}
</script>
